<template>
  <div class="app-container">
    <el-card class="headMenu">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><a href="">一级菜单</a></el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">二级菜单</a></el-breadcrumb-item>
        <el-breadcrumb-item><a href="#">三级菜单</a></el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <el-card class="main">
      <el-tabs value="first">
        <el-tab-pane label="平台收入" name="first">
          <el-form ref="userForm" label-width="120px" :model="fromData">
            <el-row class="selectionBox">
              <el-form-item label="店铺名称:">
                <el-input v-model="fromData.shop" size="small" style="width: 180px" placeholder="请输入" />
              </el-form-item>
              <el-form-item label="用户名:">
                <el-select v-model="fromData.usname" size="small" style="width: 180px">
                  <el-option
                    v-for="item in userNameList "
                    :key="item.id"
                    :label="item.user_name"
                    :value="item.user_name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="交易类型:">
                <el-select v-model="fromData.type" size="small" style="width: 180px">
                  <el-option
                    v-for="v in transactionType"
                    :key="v.value"
                    :label="v.label"
                    :value="v.label"
                  />
                </el-select>
              </el-form-item>
            </el-row>
            <el-row class="operationButton" type="flex" justify="space-between">

              <el-form-item label="提现单号:">
                <el-input v-model="fromData.order_number" size="small" style="width: 180px" placeholder="请输入" />
              </el-form-item>

              <el-col class="btn" :span="8">
                <el-button type="primary" size="small" @click="query">查询</el-button>
                <el-button size="small" @click="reset">重置</el-button>
              </el-col>
            </el-row>
          </el-form>

          <el-table
            :data="tableData"
            :header-cell-style="{background:'#FAFAFA',color:'#262626'}"
            style="width: 100%"
          >
            <el-table-column
              type="selection"
              width="55"
            />
            <el-table-column
              prop="shop_name"
              label=" 店铺名"
              width="120px"
            />
            <el-table-column
              prop="user_name"
              label=" 用户名"
              width="120px"
            />
            <el-table-column
              prop="delivery_meth"
              label="交易类型"
              width="150px"
            />
            <el-table-column
              prop="id"
              label="单号"
              width="150px"
            />
            <el-table-column
              prop="ordr_amt"
              label="交易金额"
              width="150px"
            />
            <el-table-column
              prop="ordr_time"
              label="交易时间"
              width="180px"
            />
            <el-table-column
              prop="refund_rate"
              label="确认退款率"
              width="180px"
            />
            <el-table-column
              label="操作"
              fixed="right"
              width="160px"
            >
              <template slot-scope="{ row }">
                <el-button type="text" size="medium" @click="removeUser(row.id)">删除</el-button>
                <el-button type="text" size="medium" @click="userEdit(row)">溯源分析</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row class="page_number">
            <el-pagination
              :current-page="page.page"
              :page-sizes="[2, 5, 10, 20]"
              :page-size="page.size"
              background
              layout="total,prev, pager, next, sizes, jumper"
              :total="page.total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </el-tab-pane>

      </el-tabs>
    </el-card>
    <expend-popup :show-dialog="showDialog" />
  </div>
</template>
<script>
import { deleteUser } from '@/api/shop'
import { getOrderList } from '@/api/order'
import expendPopup from './conponents/expendPopup'
import { getExpenditureList, date } from '@/api/table'

export default {
  components: {
    expendPopup
  },
  data() {
    return {
      page: {
        page: 0,
        size: 5,
        total: 0
      },
      currentPage4: 1,
      tableData: [{
        delivery_meth: '',
        shop_name: '',
        user_name: '',
        id: '',
        refund_rate: '',
        ordr_amt: '',
        ordr_time: ''

      }],
      showDialog: false,
      fromData: {
        shop: '',
        usname: '',
        type: '',
        order_number: '',
        withdrawal_date: ''
      },
      userNameList: [],
      transactionType: [
        { value: 1,
          label: '到店自取' },
        { value: 2,
          label: '同城配送' },
        { value: 3,
          label: '区域配送' },
        { value: 4,
          label: '所有方式' }
      ],
      BulletBoxList: {}

    }
  },
  created() {
    this.getTabelList()
  },
  methods: {
    async   getTabelList() {
      try {
        const res = await getOrderList()

        this.page.total = res.total
        this.tableData = res.data

        const rest = await date(this.page)

        this.tableData = rest.data

        const newArr = res.data.filter(v => {
          return v.user_name
        })
        this.userNameList = newArr
      } catch (error) {
        console.log(error)
      }
    },
    removeUser(id) {
      this.$confirm('确认删除该用户吗').then(() => {
        return deleteUser(id)
      }).then(() => {
        this.$message.success('删除成功')
        this.getTabelList()
      })
    },
    async  query() {
      try {
        const { data } = await getExpenditureList(this.fromData)

        this.tableData = data
      } catch (error) {
        console.log(error)
      }
    },
    reset() {
      this.fromData = {
        shop: '',
        usname: '',
        type: '',
        order_number: '',
        withdrawal_date: ''
      }
      this.getTabelList()
    },
    userEdit(row) {
      this.showDialog = true

      this.BulletBoxList = row
    },
    handleSizeChange(size) {
      this.page.size = size
      this.getTabelList()
    },
    handleCurrentChange(newPage) {
      this.page.page = newPage
      this.getTabelList()
    }

  }

}
</script>
<style lang="scss" scoped>
.app-container{
  .headMenu{
    margin-bottom: 20px;
  }
  .main {
    .selectionBox {
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
    .operationButton{

      .btn{
          display: flex;
          justify-content: center;
          align-items: start;

      }
    }

    .page_number{
         display: flex;
         justify-content: center;
         margin-top: 20px;
    }
  }

}
</style>
